<template>
  <div class="fillcontain">
    <bt-col-header title="险种规则导航菜单"></bt-col-header>
    <div class="page-content">
      <div class="btn-padding left">
        <el-button :plain="true" type="info" icon="circle-plus" @click="addOrUpdateHandle('add')">新增</el-button>
      </div>

      <el-table :data="dataList" row-key="menuId" border style="width: 100%">
        <el-table-column
          prop="menuName"
          header-align="center"
          min-width="150"
          label="名称"
        >
        </el-table-column>
        <el-table-column
          prop="parentName"
          header-align="center"
          align="center"
          width="120"
          label="上级菜单"
        >
        </el-table-column>
        <el-table-column
          prop="type"
          header-align="center"
          align="center"
          label="类型"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type === '0'" size="small">目录</el-tag>
            <el-tag v-else-if="scope.row.type === '1'" size="small" type="success"
              >菜单</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="orderNum"
          header-align="center"
          align="center"
          label="排序号"
        >
        </el-table-column>
        <el-table-column
          prop="groupIdentifys"
          header-align="center"
          align="center"
          width="150"
          :show-overflow-tooltip="true"
          label="规则组标识"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="addOrUpdateHandle('edit', scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="deleteHandle(scope.row.menuId,scope.row.menuName)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      ref="addOrUpdate"
      @refreshDataList="getDataList"
    ></add-or-update>
  </div>
</template>

<script>
import { rulesList, menudelete } from "@/api/rulesmenu";
import AddOrUpdate from "./menu-add-or-update";
import { treeDataTranslate } from "@/utils";
export default {
  data() {
    return {
      dataForm: {},
      dataList: [],
    };
  },
  components: {
    AddOrUpdate,
  },

  created() {
    this.getDataList();
  },
  methods: {
    // 获取数据列表
    getDataList() {
      rulesList({}).then(({ data }) => {
        console.log(data, "data");
        this.datat = data.data.slice(0);
        let datat = data.data
        datat.forEach(e=>{
          datat.forEach(k=>{
            if (e.menuId === k.parentId) {
              k.parentName = e.menuName;
            }
          })
        })
        this.dataList = treeDataTranslate(datat, "menuId");
        this.dataSort(this.dataList)
      });
    },
    arraySort(array) {
      array.sort((a,b)=>{return a.orderNum - b.orderNum})
    },
    dataSort(data) {
      this.arraySort(data)
              data.forEach(t=>{
                if (t && t.children && t.children.length) {
                  this.dataSort(t.children) 
                }
              })
    },
    // 新增 / 修改
    addOrUpdateHandle(operation, row) {
      // console.log(operation,row, "row");
      this.$refs.addOrUpdate.visible = true;
      // console.log(this.$refs.addOrUpdate, "addOrUpdate");
      this.$nextTick(() => {
        this.$refs.addOrUpdate.$refs["dataForm"].resetFields();
        this.$refs.addOrUpdate["dataForm"].parentId = null;
        //  
        // console.log(
        //   this.$refs.addOrUpdate["dataForm"],
        //   'this.$refs.addOrUpdate["dataForm"]'
        // );
        this.$refs.addOrUpdate.dataForm.department = [];
        this.$refs.addOrUpdate.menuList = this.dataList;
        this.$refs.addOrUpdate.title = "新增";
        if (operation === "edit") {
          this.$refs.addOrUpdate.title = "修改";
          this.$refs.addOrUpdate["dataForm"].menuId = row.menuId;
          this.$refs.addOrUpdate["dataForm"].type = Number(row.type);
          this.$refs.addOrUpdate["dataForm"].menuName = row.menuName;
          this.$refs.addOrUpdate["dataForm"].parentId = row.parentId;
          // console.log(this.$refs.addOrUpdate["dataForm"].parentName);
          this.$refs.addOrUpdate["dataForm"].orderNum = row.orderNum;
          this.$refs.addOrUpdate["dataForm"].remark = row.remark;
          this.$refs.addOrUpdate.menuListTreeSetCurrentNode();
          this.$refs.addOrUpdate["dataForm"].parentName = row.parentName
          this.$refs.addOrUpdate["dataForm"].groupIdentifys =
            row.groupIdentifys;
          if (row.groupIdentifys) {
            this.$refs.addOrUpdate.dataForm.department = row.groupIdentifys.split(",");
            // console.log(this.$refs.addOrUpdate.dataForm.department, "department");
          }
          // console.log(this.$refs.addOrUpdate["dataForm"]);
        } else {
          this.$refs.addOrUpdate["dataForm"].parentName = ''
          this.$refs.addOrUpdate["dataForm"].menuId = ''
        }
      });
    },
    // 删除
    deleteHandle(id,menuName) {
      // console.log(menuName);
      this.$confirm(`确定对[${menuName}]进行[删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        menudelete(id).then(({ data }) => {
          if (data && data.resultCode === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              },
            });
          } else {
            this.$message.error(data.resultMsg);
          }
        });
      });
    },
  },

};
</script>
